@import '../../style/theme/color';
@import '../../style/theme/corner';

.devui-month-panel {
  height: 300px;
  font-size: 0;

  .devui-year-list {
    padding: 8px 0;
    display: inline-block;
    width: 80px;
    height: 300px;
    overflow: auto;
    text-align: center;
    font-size: 12px;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    &-item {
      height: 30px;
      line-height: 30px;
      background-color: $devui-global-bg;
      cursor: pointer;

      &.title-active {
        background-color: $devui-base-bg;
      }

      &:hover:not(.title-active) {
        background-color: $devui-list-item-selected-bg;
      }
    }
  }

  .devui-month-list-wrapper {
    padding: 0 4px;
    display: inline-block;
  }

  .devui-month-list {
    width: 180px;
    height: 295px;
    font-size: 12px;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    .devui-table-year-title {
      text-align: start;
      line-height: 26px;
      color: $devui-aide-text;
      padding-left: 8px;
    }

    .devui-month-table {
      border-collapse: collapse;
    }

    .devui-month-item {
      width: 60px;
      height: 40px;
      padding: 4px 0;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;

      &:hover span:not(.devui-disabled) {
        background-color: $devui-list-item-hover-bg;
      }

      span {
        display: block;
        line-height: 32px;
        border-radius: $devui-border-radius-feedback;

        &.devui-disabled {
          border-radius: 0;
        }
      }

      &.devui-table-this-month span {
        color: $devui-brand;
      }

      &.devui-table-month-selected {
        span {
          background: $devui-list-item-active-bg;
          color: $devui-list-item-active-text;

          &:hover {
            background-color: $devui-list-item-active-bg;
          }
        }

        &.devui-table-date-abandon-selected {
          span {
            background: $devui-primary-disabled;
          }
        }
      }

      &.devui-table-date-inrange:not(.devui-table-month-selected) span {
        background-color: $devui-list-item-hover-bg;
        border-radius: 0;
      }

      &.devui-table-date-start:not(.devui-table-date-end) span {
        border-radius: $devui-border-radius-feedback 0 0 $devui-border-radius-feedback;
      }

      &.devui-table-date-end:not(.devui-table-date-start) span {
        border-radius: 0 $devui-border-radius-feedback $devui-border-radius-feedback 0;
      }

      &.devui-table-date-in-selected-range:not(.devui-table-date-inrange):not(:hover) span {
        background-color: $devui-disabled-bg;
        border-radius: 0;
      }

      &.devui-table-date-active-type:not(.devui-table-date-abandon-selected) span {
        animation: 2s ease 0s infinite normal both breath-animation;
      }
      @keyframes breath-animation {
        0% {
          box-shadow: 0 0 0 $devui-list-item-active-bg;
        }

        50% {
          box-shadow: 0 0 8px $devui-list-item-active-bg;
        }

        to {
          box-shadow: 0 0 0 $devui-list-item-active-bg;
        }
      }
    }
  }
}
